<template>
	<view class="minMessage">
		<u-navbar leftText="返回" title="个人中心" :safeAreaInsetTop="true" placeholder fixed :autoBack="true">
			<view class="u-nav-slot" slot="left">
				<u-icon name="arrow-left" size="19"></u-icon>
			</view>
			<view class="u-nav-slot" slot="right" @click="readAll">
				<u--text text="全部已读" color="#333" size="14"></u--text>
			</view>
		</u-navbar>
		<!-- 我的消息 -->
		<u-tabs :list="list1" @click="click" :current="current" lineWidth="50"></u-tabs>
		<swiper class="swiper" :current="current" @change="change">
			<swiper-item v-for="item in list1" :key="item.id">
				<view class="swiper-item uni-bg-red" v-if="message.messageList.length && !message.loading">
					<scroll-view style="height: 100%" :scroll-y="true" :lower-threshold="0" :refresher-enabled="false"
						:refresher-triggered="triggered" @scrolltolower="scrolltolower" refresher-default-style="black">
						<view class="content">
							<view class="content_item" :class="messageItem.is_read == 1 ? 'read' : 'unRead'"
								v-for="messageItem in message.messageList" :key="messageItem.id"
								@click="readyMessage(messageItem)">
								<u-badge :isDot="messageItem.is_read == 1 ? false : true" :absolute="true"
									:offset="[5, 5]"></u-badge>
								<view class="title flex">
									<p>{{ messageItem.title }}</p>
									<p>
										{{ messageItem.create_time }}
									</p>
								</view>
								<view class="flex">
									<!-- <view class="icon_img">
                    <i class="blue iconfont icon-regular"></i>
                    <i
                      v-if="false"
                      class="yellow iconfont icon-xitongtongzhi"
                    ></i>
                    <i v-if="false" class="red iconfont icon-a-Group33633"></i>
                    <i v-if="false" class="red iconfont icon-xitongtongzhi"></i>
                  </view> -->
									<view class="message">
										<view class="msg">
											<u--text :text="messageItem.content" :lines="2" color="#999"></u--text>
										</view>
										<view class="time flex">
											<view class="doingEnd" v-if="messageItem.friend_status">
												<view class="btn">
													<u-button :text="
                              messageItem.friend_status == 2
                                ? '已拒绝'
                                : '已添加 '
                            " :type="
                              messageItem.friend_status == 2
                                ? 'error'
                                : 'primary '
                            " size="mini" disabled></u-button>
												</view>
											</view>
										</view>
									</view>
								</view>
								<view class="doing flex" @click.stop v-if="messageItem.friend_status == 0">
									<u-button type="primary" text="同意" style="width: 30%"
										@click="AgreeRequest(1, messageItem)">
										同意
									</u-button>
									<u-button text="拒绝" type="error" style="width: 30%"
										@click="AgreeRequest(2, messageItem)">
										拒绝
									</u-button>
								</view>
							</view>
							<u-loadmore :status="loadMore.status" :loading-text="loadMore.loadingText"
								:loadmore-text="loadMore.loadmoreText" :nomore-text="loadMore.nomoreText" />
						</view>
						<!-- 需要滚动的区域 -->
					</scroll-view>
				</view>
				<view class="swiper-item-none" v-else-if="message.loading">
					<u-loading-icon text="数据加载中..." textSize="20"></u-loading-icon>
				</view>
				<view class="swiper-item-none" v-else-if="!message.messageList.length">
					<u-empty mode="data"> </u-empty>
				</view>
			</swiper-item>
		</swiper>
		<u-toast ref="uToast1" />
	</view>
</template>

<script>
	import {
		friendsRequest,
		messageUnreadNum,
		messageLists,
		messageUpdateRead,
		messageCategory,
	} from "@/common/api/index";
	import divider from "@/components/divider/divider";
	export default {
		name: "minMessage",
		components: {
			divider,
		},
		data() {
			return {
				list1: [],
				message: {
					page_no: 1,
					page_size: 10,
					messageList: [],
					loading: true,
					total: 0,
				},
				current: "0",
				loadMore: {
					status: "loadmore",
					loadingText: "努力加载中",
					loadmoreText: "轻轻上拉",
					nomoreText: "实在没有了",
				},
				triggered: false, // 下拉是否激活
				src: "https://img0.baidu.com/it/u=876892934,2023058946&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1120",
				/* 添加请求弹窗 */
				requestForm: {
					requestShow: false,
					title: "好友请求",
					content: `空山新雨后<br>
				天气晚来秋`,
				},
			};
		},
		async onLoad(options) {
			this.current = options.current || '0'
		},
		async onShow() {
			this.message.messageList = [];
			await this.getNavList();
			await this.change();
		},
		methods: {
			// tab栏
			click(e) {
				this.message.messageList = [];
				this.message.page_no = 1;
				this.current = e.index;
				this.message.loading = true;
			},
			// 页面swiper
			change(e) {
				this.current = e ? e.detail.current : this.current;
				this.message.loading = true;
				this.message.messageList = [];
				this.message.page_no = 1;
				this.getList();
			},
			// 获取tab栏内容
			async getNavList() {
				let res = await messageCategory();
				if (res.code == 1) {
					this.list1 = res.data;
				} else {
					this.showMsg(res.msg);
				}
			},
			// 获取页面swiper内容
			async getList() {
				let formData = {
					page_no: this.message.page_no,
					page_size: this.message.page_size,
					type_id: this.list1[this.current].id,
				};
				let res = await messageLists(formData);
				if (res.code == 1) {
					this.message.messageList = [
						...this.message.messageList,
						...res.data.lists,
					];
					this.message.total = res.data.count;
					this.message.loading = false;
					if (this.message.messageList.length == this.message.total) {
						this.loadMore.status = "nomore";
					}
				} else {
					this.showMsg(res.msg);
				}
			},
			//   消息全部已读
			async readAll() {
				console.log(1111);
				let formData = {
					id: "all",
				};
				let res = await messageUpdateRead(formData);
				console.log(res);
				if (res.code == 1) {
					this.$refs.uToast1.show({
						message: "全部已读",
						type: "success",
						duration: 2000,
						position: "top",
					});
					this.message.messageList = [];
					await this.getNavList();
					await this.change();
				} else {
					this.showMsg(res.msg);
				}
			},
			//   阅读详情
			async readyMessage(item) {
				//   if (item.title === "添加好友通知") {
				//     return;
				//   }
				this.message.loading = true;
				uni.navigateTo({
					url: `/pages/mine/minMessageDetails?id=${item.id}`,
				});
			},
			// 好友请求   1同意 2拒绝
			async AgreeRequest(type, item) {
				this.requestForm.requestShow = false;
				let formData = {
					friend_id: item.friend_id,
					status: type,
				};
				let res = await friendsRequest(formData);
				if (res.code === 1) {
					this.$refs.uToast1.show({
						message: type == 1 ? "已添加好友" : "已拒绝添加",
						type: type == 1 ? "success" : "error",
						duration: 2000,
						position: "top",
					});
					let formData = {
						id: item.id,
					};
					let result = await messageUnreadNum(formData);
					console.log("result", result);
					this.message.messageList = [];
					this.message.page_no = 1;
					this.getList();
				} else {
					this.showMsg(res.msg);
				}
			},
			// 上拉加载
			scrolltolower() {
				if (this.message.messageList.length < this.message.total) {
					this.loadMore.status = "loading";
					this.message.page_no += 1;
					// 继续请求下一页，记得保留原先数组
					this.getList();
				} else {
					console.log(222);
					this.loadMore.status = "nomore";
					// uni.showToast({
					//   title: "没有更多了",
					//   icon: "none",
					//   duration: 2000,
					// });
					return;
				}
			},
			// 自定义下拉刷新被触发
			onRefresh() {
				// 开启下拉自定义样式
				this.triggered = true;
				//  重新调用
				this.init();
				// 1秒之后复位
				setTimeout((e) => {
					this.triggered = false;
				}, 1000);
			},
		},
	};
</script>

<style scoped lang="scss">
	.minMessage {
		background-color: #f8f8f8;
		padding: 0 20rpx 20rpx;
		height: 100vh;
		overflow: auto;
		box-sizing: border-box;

		.minMessage_content {
			.card {
				padding: 50rpx 30rpx;
				box-sizing: border-box;
				background-color: #fff;
				border-radius: 20rpx;

				.top {
					justify-content: space-between;
					align-items: center;

					.left {
						.word {
							font-size: 26rpx;
							color: #999;
							margin-left: 30rpx;

							p:first-child {
								font-size: 32rpx;
								color: #333;
								margin-bottom: 10rpx;
							}
						}
					}

					.right {
						.box {
							width: 120rpx;

							text-align: center;
							padding: 10rpx 30rpx;

							border-radius: 20rpx;
							font-size: 22rpx;
						}

						.agree {
							background-color: #83f05b;
							color: #099f54;
						}

						.refuse {
							background-color: #ccc;
							color: #999;
						}
					}
				}

				.bottom {
					margin-top: 40rpx;
					font-size: 26rpx;
				}
			}
		}

		.swiper {
			// background-color: #099f54;
			height: 87vh;
			padding: 20rpx;
			box-sizing: border-box;
			border-radius: 0 0 50rpx 50rpx;

			.swiper-item {
				height: 100%;
			}

			.swiper-item-none {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 100%;
			}
		}

		.content {
			padding-bottom: 30rpx;
			box-sizing: border-box;

			.content_item {
				border: 1px solid #eee;
				margin-bottom: 20rpx;
				padding: 20rpx;
				border-radius: 20rpx;
				position: relative;
				box-sizing: border-box;

				.title {
					justify-content: center;
					font-weight: 600;
					justify-content: space-between;
					font-size: 16px;

					p:nth-child(2) {
						font-weight: normal;
						//   color: red;
						color: #999;
						font-size: 15px;
					}
				}

				.doing {
					justify-content: space-around;
					margin-top: 20rpx;
					// padding-left: 30%;
				}

				.flex {
					align-items: center;

					.icon_img {
						margin-top: 30rpx;
						width: 30%;

						.iconfont {
							font-size: 80rpx;
							margin-right: 10rpx;
						}
					}

					.message {
						font-size: 15px;
						color: #999;

						view {
							margin-top: 10rpx;
						}

						.time {
							justify-content: flex-end;
							align-items: center;

							.doingEnd {
								margin-top: 0;
							}
						}
					}
				}
			}
		}
	}

	.unRead {
		background-color: #f1f1f1;
	}

	.read {
		background-color: #fff;
	}
</style>